<template>
    <div>
        <div class="width-75 tc">
            <div class="z-header">
                <div @click="$router.back(-1)" class="lt">
                    <i class="iconfont icon-zuo m-t-18"></i>
                </div>
                <div class="fs-36 c-3">
                    动态详情
                </div>
            </div>
        </div>
        <div class="m-t-28 width-75">
            <div class="rt">
                <i class="iconfont icon-xia"></i>
            </div>
            <!--头像、名字和学校-->
            <div class="row">
                <div>
                    <img :src="this.content.dynamic.user.portrait" alt="" class="portrait">
                </div>
                <div class="m-l-14">
                    <h2 class="fs-36 c-3">{{this.content.dynamic.user.nickName}}</h2>
                    <p class="fs-24 c-3 m-t-18">{{this.content.dynamic.school.name}}</p>
                </div>
            </div>
            <!--动态的内容-->
            <div class="fs-32 l-h-4 m-t-18 c-3">
                {{this.content.dynamicBody}}
            </div>
            <!--动态图片-->
            <div class="m-t-18">
                <img v-for="list in content.dynamic.image" :src="list" alt="" class="dynameic-img m-l-14">
                <!--<img src="../../img/cj.png" alt="" class="dynameic-img">-->
            </div>
            <!--点赞、评论、留言、转发-->
            <div>
                <i class="iconfont icon-dingweiweizhi fs-24 m-t-18">
                    0.5km
                </i>
            </div>
            <div class="flex m-t-4 c-3">
                 
                    <div>
                        <i class="iconfont icon-fenxiang fs-28"> </i>
                        <span class="fs-24">分享</span>
                    </div>
                    <div>
                        <i class="iconfont icon-shuohuaqipao fs-28"></i>
                        <span class="fs-24">{{this.content.listDynamicComment.length}}</span>
                    </div>
                    <!--点击取消赞-->
                    <div @click="cancel" v-if="content.wetThumbsUp" class="c-c2">
                        <!--thumbs()-->
                        <i class="iconfont icon-dianzan-copy fs-28"></i>
                        <span class="fs-24">
                            {{content.listThumbsUp.length}}
                        </span>
                    </div>
                    <!--点击赞-->
                    <div @click="thumbs" v-if="!content.wetThumbsUp">
                        <!--thumbs()-->
                        <i class="iconfont icon-dianzan-copy fs-28"></i>
                        <span class="fs-24">
                            {{content.listThumbsUp.length}}
                        </span>
                    </div>
                 
            </div>
            <!--聊天内容-->
            <div>
                <ul class="fs-24 c-3">
                    <li class="m-t-18" v-for="list in content.listDynamicComment" @click="revert(list.userName2.username , list.userName2.nickName)">
                        {{list.userName2.nickName}}
                        <span v-if="list.userName1 != null">回复{{list.userName1.nickName}}</span> 
                        : {{list.body}}
                    </li>
                    <!--<li class="m-t-18">
                        徐鸭丽回复胡海哥：哼，没有我厉害（傲娇脸）
                    </li>
                    <li class="m-t-18">
                        猴登峰：都比我牛逼（丧气脸）
                    </li>-->
                </ul>
            </div>
            <!--input框-->
            <div class="m-t-28 dynamic-details">
                <input type="text" :placeholder="placeholder" class="dynamic-input b-0" v-model="discuss"> 
                <span class="c-c2" @click="discussContent(userID)">确定</span>
            </div>
        </div>

    </div>
</template>
<script>
import { z } from '../../assets/js/common'
    export default {
        data() {
            return{
                dynamicId:this.$route.query.id,
                content:"",  
                discuss:"",     //评论的内容
                userID:"empty",   //回复人的id
                placeholder:"留下赞美的话吧"   //评论输入框的placeholder属性
            }
        },
        methods:{
            // 动态详情内容
            details(){
                var params = new URLSearchParams();
                params.append("dynamicId", this.dynamicId);

                this.$http({
                    method:"post",
                    url:localPath + '/dynamic/selectDynamicAllById',
                    data:params
                }).then((data)=>{
                    console.log(data.data.message);
                    var arr =  data.data.message;
                    if(arr.dynamic.image == null){
                        
                    }else{
                        arr.dynamic.image = arr.dynamic.image.split(',');
                    }
                    

                    this.content = arr;
                }).catch((error)=>{
                    console.log(error);
                })
            },
            revert(username , who){
                // 点击获取要回复人的ID
                this.userID = username;
                this.placeholder ="回复" + who;
                console.log(this.userID);
            },
            // 评论接口
            discussContent(id){
                var params = new URLSearchParams();
                params.append("dynamicId", this.dynamicId);
                params.append("body",this.discuss);
        
                if(id == "empty"){

                }else{
                    console.log(id);
                    params.append("userName1.username", id)
                };

                if(this.discuss == ""){
                    console.log("评论内容不能为空");
                }else{
                    this.$http({
                        method:"post",
                        url:localPath + '/dynamic/addDynamicComment',
                        data:params
                    }).then((data)=>{
                        console.log(data);
                        this.discuss = "";     //把input框里面的内容清空
                        this.username = "empty"; //每一次执行完都把保存要回复的ID都给变成默认的
                         this.placeholder = "留下赞美的话吧";

                        this.details();
                    }).catch((error)=>{
                        console.log(error);
                    })
                }
                   
            },
            // 点赞
            thumbs(){
                var params = new URLSearchParams();
                params.append("dynamicId", this.dynamicId);
                this.$http({
                    method:"post",
                    url:localPath + '/dynamic/addDynamicThumbsUp',
                    data:params
                }).then((data)=>{

                    this.details();
                    console.log(data);
                }).catch((error)=>{
                    console.log(error);
                })
            },
            //取消点赞
            cancel(){
                 var params = new URLSearchParams();
                params.append("dynamicId", this.dynamicId);
                this.$http({
                    method:"post",
                    url:localPath + '/dynamic/deleteDynamicThumbsUp',
                    data:params
                }).then((data)=>{
                    this.details();
                    console.log(data);
                }).catch((error)=>{
                    console.log(error);
                })
            }
        },
        mounted() {   
            this.details();
            document.addEventListener(z());
        },
    }

</script>
<style>
.dynameic-img {
    width: 2.70rem;
    height: 2.16rem;
}
.dynamic-details{
    position: fixed;
    bottom: .1rem;
    width: 100%
}

.dynamic-input {
   width: 80%;  
    font-size: .24rem;
    /* padding: .2rem; */
    /* height: .54rem; */
    background-color: #f4f4f4;
}
</style>

